<template>
	<div class="icons">
		<swiper :options="swiperOption" v-if="showIcon">			
			<swiper-slide v-for='items of pages' :key="items.id">
				<div class="icon" v-for="item of items" :key="item.id">
					<div class="icon-img"><img class="icon-img-content" :src="item.imgUrl"/></div>
					<p class="icon-desc">{{ item.desc }}</p>
				</div>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default{
		name: 'HomeIcons',
		props: {
			iconlist: Array
		},
		data (){
			return {
				swiperOption: {
					pagination:  '.swiper-pagination',
					loop: true,
					autoplay: false
				}
			}
			
		},
		computed: {
			pages (){
				const pages = []
				this.iconlist.forEach((item,index) => {
					const page = Math.floor( index / 8 ) //1
					if( !pages[page] ){
						pages[page] = [];
					};
					pages[page].push(item);
				});
				return pages;
			},
			showIcon (){
				return this.iconlist.length
			}
		}
	}
</script>

<style lang="stylus" scoped>
    @import '~styles/varilbes.styl'
    @import '~styles/mixins.styl'
	.icons
		margin-top 0.1rem
		padding-bottom 50%
		width 100%
		height 0
		overflow hidden
		.icon
			position relative
			float left
			width 25%
			height 0
			padding-bottom 25%
			overflow hidden
			.icon-img
				position absolute
				top 0
				left 0
				right 0
				bottom .44rem
				box-sizing border-box
				.icon-img-content
					display block
					margin 0 auto
					height 100%
			.icon-desc
				position absolute
				left 0
				right 0
				bottom 0
				height .44rem
				line-height .44rem	
				color $darkTextColor
				text-align center
				ellipsis()
</style>